<template>
  <div>
    <el-form ref="command" :model="command" label-width="80px">
      <el-form-item :label="$t('TabLogs_Command')">
<!--        126	命令-->
        <el-input v-model="command.commandName"></el-input>
      </el-form-item>
      <el-form-item :label="$t('TabLogs_EnterPoint')">
<!--        127	入口点-->
        <el-input v-model="command.entryPoint" :placeholder="$t('TabLogs_Thisfunctionisnotreadyyet')"></el-input>
<!--        128	此功能尚未完善-->
      </el-form-item>
      <div class="inlien">
        <el-form-item style="width: 400px" :label="$t('TabLogs_Path')">
<!--          129	工作目录-->
          <el-input v-model="command.workPath"></el-input>
        </el-form-item>
        <el-form-item style="width: 400px" :label="$t('TabLogs_User')">
<!--          130	用户-->
          <el-input v-model="command.user"></el-input>
        </el-form-item>
      </div>
      <el-form-item label="Conlose">
        <el-radio-group v-model="command.conlose">
          <el-radio label="Interactive&Tty"></el-radio>
          <el-radio label="Interactive"></el-radio>
          <el-radio label="Tty"></el-radio>
          <el-radio label="none"></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <el-form label-width="70px" class="demo-ruleForm from">
      <div class="title">
        {{ $t('TabLogs_LogSettings') }}
<!--        日志设置-->
      </div>
      <el-form-item :label="$t('TabLogs_Driver')" v-if="systeminfo">
<!--        132	驱动程序-->
        <el-select v-model="logs.drive" :placeholder="$t('TabLogs_drive')">
<!--           drive:"请选择驱动",-->
          <el-option label="Default logging driver" value=""></el-option>
          <el-option :label="item" :value="item" v-for="item in systeminfo.Plugins.Log" :key="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('TabLogs_option')" prop="isSynchronize">
        <el-button icon="iconfont icon-add" class="submit" size="mini" style="margin-left: 0" title="$t('TabLogs_Disabledwhenthedriverisinthedefaultstate')" @click="addPort" :disabled="logs.drive === 'Default' ? true : false">添加</el-button>
        <span class="tishi" v-show="logs.drive === 'Default'">{{$t('TabLogs_Whenthedriveristhedefaultoptionscannotbeadded')}}</span>
      </el-form-item>
      <el-form-item label="" prop="port" v-for="(item, index) in portNum" :key="item">
        <el-input :placeholder="$t('TabLogs_Whenthedriveristhedefaultoptionscannotbeadded')" v-model="logs.logsOption[index].option" style="width: 40%;">
<!--          请输入参数名-->
          <template slot="prepend">option</template>
        </el-input>
        <el-input :placeholder="$t('TabLogs_Whenthedriveristhedefaultoptionscannotbeadded')" v-model="logs.logsOption[index].value" style="width: 40%;margin-left: 20px;">
<!--          请输入参数-->

          <template slot="prepend">value</template>
        </el-input>
        <el-button @click="delPort(item, index)" title="删除" type="danger" icon="iconfont icon-lajitong" style="margin-left: 10px; padding: 10px;" size="mini"></el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import post from '@/utils/post'
export default {
  data () {
    return {
      systeminfo: null,
      command: {
        commandName: '',
        entryPoint: '',
        workPath: '', // 工作目录
        user: '',
        conlose: 'none'
      },
      logs: {
        drive: '',
        logsOption: []
      },
      portNum: [],
      i: 0
    }
  },
  watch: {
    // 监听vuex中是isupload是否变化为true，true则上传本组件的数据。
    '$store.state.isUpload': function () {
      if (this.$store.state.isUpload) {
        this.$store.commit('changeCrateData', ['logs', this.logs])
        this.$store.commit('changeCrateData', ['command', this.command])
      }
    }
  },
  mounted () {
    const docker = 'curl --unix-socket /var/run/docker.sock -s "http:/v1.40/info"'
    post({ docker }, (res) => {
      this.systeminfo = res
    }, this)
  },
  methods: {
    // 添加开放端口的input框
    addPort () {
      this.portNum.push(this.i)
      this.logs.logsOption.push({ option: '', value: '' })
      this.i++
    },
    // 删除开放端口的input框
    delPort (item, index) {
      this.portNum = this.portNum.filter(data => {
        return data !== item
      })
      this.logs.logsOption.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.inlien{
  display: flex;
}
.from{
  border: 1px solid #067FB5;
  border-radius: 15px;
  padding: 20px 10px 0px 10px;
  margin: 30px 0px 0px 0px;
  background: #F7FCFF;
  position: relative;
  .title{
    position: absolute;
    top: -14px;
    z-index: 10;
    left: 30px;
    font-size: 18px;
    font-weight: bold;
    background: #F7FCFF;
    padding: 0px 5px;
    border-radius: 5px;
  }
}
.submit{
  background: #067FB5;
  color: #fff;
  margin-left: 30px;
}
.tishi{
  font-size: 12px;
  color: #ccc;
  margin-left: 20px;
}
</style>
